import './Home.scss';
import bar from '../../images/touxiang.jpg';
import Bar from '../../components/NotificationBar/NotificationBar'
import List from '../../components/ArticleList/ArticleList'
import { useEffect, useState } from 'react';
import moment from 'moment'
const View = () => {
    // 当前日期信息卡数据
    const week = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六']
    const [nowDate,setnowDate] = useState(moment().format('YYYY-MM-DD'))
    

    // 倒计时信息卡数据 
    const [things,setThings] = useState({thingName:'元旦',thingDate:'2024-01-01'})
    let resetDays = moment(things.thingDate).diff(nowDate,'days')

    useEffect(
        () => {
            resetDays = moment(nowDate).diff(things.thingDate,'days')
        },
        []
    );

    return (
        <div>
            {/* 首页大图 */}
            <div className="homeImg">
                <div className='homeTitle'>
                    <img className='barImg' src={bar}></img>
                    <div className='name'>一朝</div>
                    <div className='t2'>有人住高楼，有人在深沟，有人光万丈，有人一身锈，世人万千种，浮云莫去求，斯人若彩虹，遇上方知有</div>
                </div>
            </div>

            {/* 日期信息 + 倒计时 */}
            <div className='nowInfoBox'>
                <div className='nowInfoItem'>
                    <div className='txt'>‍❤️‍ 新朋友！欢迎来访！</div>
                    <div className='txt'>{nowDate}</div>
                    <div className='txt'>{week[moment().format('d')]}</div>
                </div>
                <div className='nowInfoItem'>
                    <div className='txt'>距离 <span className='thingName'>{things.thingName}</span> 还有</div>
                    <div className='txt'> {resetDays}天 </div>
                </div>
            </div>

            {/* 公告栏 */}
            <div className='barLayout'>
                <Bar />
            </div>

            {/* 文章栏 */}
            <div className='listLayout'>
                <List/>
            </div>
        </div>
    )
}

export default View